<template>
  <!-- 资讯列表页面 -->
  <div>
    <!-- 头部区域 -->
    <div class="hearder">
      <!-- 状态选择框 -->
      <el-select v-model="articleStatus" clearable placeholder="状态">
        <el-option label="审核未通过" value="审核未通过"> </el-option>
        <el-option label="审核通过" value="审核通过"> </el-option>
        <el-option label="未审核" value="未审核"> </el-option>
        <el-option label="推荐" value="推荐"> </el-option>
      </el-select>

      <!-- 标题输入框 -->
      <el-input style="width: 200px" placeholder="请输入标题" 
      v-model='articleName'
      clearable>
      </el-input>

      <!-- 栏目选择框 -->
      <el-select v-model="articleCategory" clearable placeholder="请选择栏目">
        <el-option
          v-for="data in articleCategoryData.filter((item) => !item.parentId)"
          :key="data.id"
          :label="data.name"
          :value="data.id"
            ></el-option>
      </el-select>

      <!-- 查询按钮 -->
      <el-button type="primary" @click="queryArticle">查询</el-button>

      <!-- 发布风采按钮 -->
      <el-button type="primary" style="float: right" @click="publish">发布风采</el-button>
    </div>

    <!-- 表格内容展示区域 -->
    <div class="table_content">
      <el-table :data="articleData.list" style="width: 100%"  @row-click="handdle">
        <!-- 文章序号 -->
        <el-table-column type="index" prop="date" label="序号" align="center">
        </el-table-column>
        <!-- 文章封面 -->
        <el-table-column prop="cover" label="封面" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-image
              style="width: 150px; height: 150px"
              :src="scope.row.cover"
              object-fit:
              contain
            ></el-image>
          </template>
        </el-table-column>
        <!-- 文章风采 -->
        <el-table-column prop="title" label="风采" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.title }}</p>
            <p v-if="scope.row.baseUser">{{ scope.row.baseUser.realname }}</p>
            <p v-if="scope.row.category">{{ scope.row.category.name }}</p>
            <p>{{ scope.row.publishTime | fmtDate_global }}</p>
          </template>
        </el-table-column>
        <!-- 文章状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '审核通过'" type="success"
              >审核通过</el-tag
            >
            <el-tag v-else-if="scope.row.status == '推荐'" type="warning"
              >推荐</el-tag
            >
            <el-tag v-else-if="scope.row.status == '审核不通过'" type="danger"
              >审核不通过</el-tag
            >
            <el-tag v-else-if="scope.row.status == '未审核'" type="info"
              >未审核</el-tag
            >
          </template>
        </el-table-column>
        <!-- 文章操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click.stop="open(scope.row.id, scope.row.status)"
              type="text"
              size="small"
            >
              推荐
            </el-button>
            <el-button
              @click.stop="shenhe(scope.row)"
              type="text"
              size="small"
              style="color: blue"
            >
              审核
            </el-button>
            <el-button
              @click.stop="deleteRow(scope.row.id)"
              type="text"
              size="small"
              style="color: red"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 底部分页区域 -->
    <div class="paginetion">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,4,6,8]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
      </el-pagination>
    </div>
    

    <!-- 审核风采信息模态框 -->
    <el-dialog
      title="审核风采信息"
      :visible.sync="centerDialogVisible"
      width="80%"
      center
    >
      <!-- 风采标题信息 -->
      <el-table :data="dialogData">
        <el-table-column
          property="title"
          label="栏目标题"
          align="center"
        ></el-table-column>
      </el-table>
      <!-- 风采栏目内容 -->
      <el-table :data="dialogData">
        <el-table-column
          label="栏目内容"
          align="center"
        >
        <template slot-scope="scope">
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column>
      </el-table>
      <!-- 模态框底部 -->
      <span slot="footer" class="dialog-footer">
          <el-button @click="changeshenhe('审核通过')">审核通过</el-button>
          <el-button type="primary" @click="changeshenhe('审核不通过')">审核不通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";

export default {
  data() {
    return {
      // 当前栏行的数据
      dialogData: [],
      // 文章数据
      articleData: [],
      // 栏目名称
      articleName: "",
      // 栏目状态
      articleStatus: "",
      // 产品栏目名称
      articleCategory:'',
      // 产品栏目数据
      articleCategoryData:[],
      

      // 当前的页码
      currentPage:1,
      // 每页要展示的数据条数
      pageSize:8,
      // 页面一共有多少条数据
      total:10,
      // 定一个查询参数
      queryData:{},

      // 模态框的隐藏
      centerDialogVisible: false,
    };
  },
  computed: {
  },
  methods: {
    
    // 发送获取文章的数据请求
    async getAllarticleData() {
      let data = {
        page:this.currentPage,
        pageSize:this.pageSize
      };
      // queryData 和 data 结合成一个对象
      // console.log({...data,...this.queryData});
      let res = await get("/article/pageQuery",{...data,...this.queryData});
      this.articleData = res.data;
      this.total = res.data.total
    },

    // 控制每页条数   val:每页要展示的数据条数
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val;
      // 将当前的页数 重置到第一页
      this.currentPage = 1;
      // 重新调用获取所有产品数据的方法
      this.getAllarticleData();
    },
    // 控制当前处在的页数   val：当前的页码
    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.currentPage = val;
      // 重新调用获取所有产品数据的方法
      this.getAllarticleData();
    },

    // 模态框的审核与否
    async changeshenhe(status) {
      await post("/article/changeStatus", {id:this.dialogData[0].id,status}),
        this.$message({
          type: "success",
          message: "成功审核",
        });
      this.centerDialogVisible= false,
      this.getAllarticleData();
    },
    // 推荐按钮的方法
    open(id, status) {
      let data = {
        id,
        status: "推荐",
      };
      this.$confirm("您确定要推荐此资讯吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await post("/article/changeStatus", data),
            this.$message({
              type: "success",
              message: "成功推荐",
            });
          this.getAllarticleData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消推荐",
          });
        });
    },

    // 删除按钮的方法
    deleteRow(id) {
      this.$confirm("此操作将永久删除该风采, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await get("/article/deleteById", { id });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getAllarticleData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 审核按钮的方法
    shenhe(row) {
      this.dialogData = [
        {
          title: row.title,
          content: row.content,
          id:row.id
        },
      ];
      this.centerDialogVisible = true;
    },

    // 根据条件模糊查询
    queryArticle(){
      // 定义参数
      let data = {
        // 文章标题
        title: this.articleName,
        // 栏目的id
        categoryId: this.articleCategory,
        // 文章状态
        status: this.articleStatus
      }
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data){
        if (!data[key]){
          delete data[key]
        }
        // 将参数赋值给 queryData
        this.queryData = data
        // 将页数强制回到第一页
        this.currentPage = 1
        // 重新加载文章数据
        this.getAllarticleData()
      }
      
    },

    // 获取产品栏目的方法
    async queryCategoryData(){
      let res = await get('/category/findAll');
      this.articleCategoryData = res.data
    },

    // 点击当前行跳转评论页面
    handdle(row){
      // 跳转传参
      this.$router.push({
        // 跳转的路由路径
        path: "/admin/info/article/Details",
        // 想要传递的参数 使⽤query对象的形式进⾏传递
        query: {
          msg: row.id,
        },
      });
    },

    // 发布风采按钮方法
    publish(){
       // 跳转传参
      this.$router.push({
        // 跳转的路由路径
        path: "/admin/info/article/Publish",
        // 想要传递的参数 使⽤query对象的形式进⾏传递
      });
    }
    
  },

  created() {
    // 自动获取文章数据
    this.getAllarticleData();
    // 自动获取文章栏目数据
    this.queryCategoryData()
  },
  mounted() {},
};
</script>
<style scoped>
/* 底部样式 */
.paginetion{
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>